<template>
	<div id="drinkCardView">
		<navAndBanner></navAndBanner>
		<div class="img1">

		</div>
		<div style="height:1px;border-top:3px solid #ffcc00;width:76.4%;margin:0 auto;"></div>	
		<div class="info" style="margin-top: 20px">
			<div class="info1" style="margin-left: 5vw"><span class="info3">酒&nbsp卡&nbsp号</span><input type="text" name="" class="info2" @keyup.13="search()" v-model="CJKH"></div>
			<div class="info1"><span class="info3">会员卡号</span>
				<input type="text" name="" class="info2" @keyup.13="search()" v-model="KHBM">
			</div> 

			<div class="info1"><span class="info3">联系电话</span>
				<input type="text" name="" class="info2" @keyup.13="search()" v-model="KHDH">
			</div>
		</div>
	<!-- 	<div class="info" style="margin-top: 20px">
			<div class="info1" style="margin-left: 5vw"><span class="info3">桌&nbsp&nbsp&nbsp&nbsp&nbsp号</span><input type="text" name="" class="info2"></div>
			<div class="info1"><span class="info3">存&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp期</span>
				<select class="info2" v-model="cunqi">
					<option value ="15">15天</option>

				</select>
			</div> 

			<div class="info1"><span class="info3">操作类别</span>
				<select class="info2" v-model="caozuoleibie">
					<option value ="取酒">取酒</option>

				</select>
			</div>
		</div> -->
		<div class="info" style="margin-top: 20px">
			<div class="info1" style="margin-left: 5vw"><span class="info3">存酒日期</span>
				<Date-picker v-model="value2" confirm  format="yyyy年MM月dd日" type="daterange" placement="bottom-end" placeholder="选择日期" style="width:14.5vw;" @on-ok="search()" ></Date-picker>
			</div>
			<div class="info1"><span class="info3">审&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp核</span>
				<select class="info2" v-model="shenhe" @change="search()">
					<option value ="false">未审核</option>
					<option value ="true">审核</option>

				</select>
			</div> 

			<div class="info1"><span class="info3">状&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp态</span>
				<select class="info2" v-model="zhuangtai">
					<option value ="取酒">可用</option>

				</select>
				
			</div>

		</div>
		<div style="margin:0 auto;width: 69vw;border-top: 2px solid #dfdddd;margin-top: 35px"></div>
		<div style="width: 69vw;margin: 0 auto;margin-top: 50px">
			<Table border :columns="columns4" :data="cardList" @on-row-dblclick="getDrinkInfo"></Table>
		</div>
		<div class="footer">
			<p>kqmts   &copy 2015-2017 All Rights Reserved</p>
			<p>川ICP备16020686号</p>
		</div>
	</div>
</template>
<script>
	import navAndBanner from '../navAndBanner.vue'
	export default{
		components:{
			navAndBanner
		},
		data(){
			return{
				cunqi:'',
				caozuoleibie:'',
				shenhe:'',
				zhuangtai:'',
				value2:[],
				cardList:[],
				CJKH:"",
				KHBM:"",
				KHDH:"",
				LRSJ:"",
				columns4:[

				{
					title: '序列',
					key: 'XL'
				},
				{
					title: '审核',
					key: 'SH'
				},
				{
					title: '酒卡号',
					key: 'CJKH'
				},
				{
					title: '存酒日期',
					key: 'CJRQ'
				},
				{
					title: '建卡人',
					key: 'JKR'
				},
				{
					title: '审核人',
					key: 'SHR'
				},
				{
					title: '状态',
					key: 'address'
				},
				{
					title: '会员号',
					key: 'KHBM'
				},
				{
					title: '姓名',
					key: 'KHMC'
				}
				]
			}
		},
		mounted(){
			this.userinfo = JSON.parse(sessionStorage.userinfo).data;
			var _this = this;
			this.$http.post(`${this.URL}/api/ws/storage_list`,{
				token:_this.userinfo.token,
				userid:_this.userinfo.YHBM,
				timestamp:new Date().getTime()
			})
			.then(function (res) {
				// body...
				console.log("res",res)
				console.log(res.data)
				if (res.data.error_code == 0) {
					for (var i = res.data.data.length - 1; i >= 0; i--) {
						res.data.data[i].XL = i;
						// if (res.data.data[i].FH == null) {
						// 	res.data.data[i].STATE = "未审核"
						// }
						// else{
						// 	res.data.data[i].STATE = "审核"
						// }
					}
					_this.cardList = res.data.data
				}
			})
		},
		methods:{
			getDrinkInfo:function(info){
					sessionStorage.CJKH = info.CJKH;
					this.$router.push(`/cunjiuFunc/drinkCardDetail`)
			},
			search:function(){
				// for (var i = this.cardList.length - 1; i >= 0; i--) {
				// 	if (this.cardList[i].key.indexOf(ss)!=-1) {
				// 		this.cardList = this.cardList[i] 
				// 	}

				// }
				// 存酒日期时间段格式化
				
				
				//循环处理时间，转换为字符串
					Date.prototype.Format = function (fmt) { //author: meizz 
    				var o = {
        			"M+": this.getMonth() + 1, //月份 
        			"d+": this.getDate(), //日 
        			"h+": this.getHours(), //小时 
        			"m+": this.getMinutes(), //分 
        			"s+": this.getSeconds(), //秒 
        			"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        			"S": this.getMilliseconds() //毫秒 
   						 };
    				if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    					for (var k in o)
    					if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    					return fmt;
				}
				if (this.value2.length>=1) {
					console.log(this.value2)
					for (var i = this.value2.length - 1; i >= 0; i--) {	
					console.log(typeof(this.value2[i]))	
					if (typeof(this.value2[i])== "object") {
						
						this.value2[i] =this.value2[i].Format("yyyy-MM-dd")
					}			
					
				} 
					this.LRSJ = this.value2[0]+","+this.value2[1]
				}
				
				var _this = this
				this.$http.post(`${this.URL}/api/ws/storage_list`,{
					token:_this.userinfo.token,
					userid:_this.userinfo.YHBM,
					timestamp:new Date().getTime(),
					CJKH:_this.CJKH,
					KHBM:_this.KHBM,
					KHDH:_this.KHDH,
					LRSJ:_this.LRSJ,
					SH:_this.shenhe
				})
				.then(function(res){
					if (res.data.error_code == 0) {
						_this.cardList = res.data.data
					}
				})
				console.log("lrsj",_this.LRSJ)
			},
			
		}
	}
</script>
<style>
	#drinkCardView .ivu-input{
		font-size: 13px;
		height: 50px;
		background-color: #eeeeee;
		color: black;
		border-radius: 15px;
		margin-left: 8px;
		border:none;
		outline: none;
		padding-left: 20px;
	}
	#drinkCardView .ivu-input-icon{
		line-height: 50px
	}

</style>
<style scoped>
	.footer{
		height: 125px;
		width: 100%;
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		text-align: center;
		vertical-align: middle;
		color: white;
		padding-top: 50px;
		margin-top: 125px
	}
	.img1{
		background: url(../../assets/img/Title5.png);
		width: 508px;
		height: 83px;
		margin:0 auto;
		margin-top: 90px;margin-bottom: 80px;
	}
	.navAndBanner{
		background:linear-gradient(30deg,#b490ca,#5ebbe7);
		width: 100%;
		height: 120px;
		vertical-align: middle;
		padding-top: 40px
		
	}
	a{
		text-decoration: none;
	}
	nav ul li{
		display: inline-block;
		vertical-align: middle;
		margin-right: 5%
	}
	nav ul li a{
		font-size: 24px;
		color: #999999;
	}
	nav ul li:first-child{
		margin-left: 13%;
		margin-right: 15%;
	}
	nav ul li:last-child{
		margin-top: 12px;
		float: right
		
	}
	body{background-color: #1E1E1E}
	*{padding:0;margin: 0;list-style:none;font-family: "微软雅黑"}
	
	.info2{
		width: 14.5vw;
		height: 50px;
		background-color: #eeeeee;
		display: inline-block;
		border-radius: 15px;
		margin-left: 23px;
		border:none;
		outline: none;
		padding-left: 20px;

	}
	.info1{
		width: 20.8vw;
		display: inline-block;
		flex: 1;
		height: 50px;
	}
	.info{
		width: 76.4vw;	
		margin: 0 auto;
		padding: 14px 0px;
		font-size: 20.5px;
		display: flex;
		color: black;


	}
</style>